<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ page contentType="text/html; charset=UTF-8" language="java"
	import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/page/base.jsp"%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>后台管理系统</title>
		<script type="text/javascript"	src="<%=path%>/manage/js/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="<%=path%>/manage/js/jquery.ztree.core-3.1.js"></script>
		<link rel="stylesheet" type="text/css" href="<%=path%>/manage/css/zTreeStyle.css" />
		<style>
body {
	width:270px;
	overflow-x:hidden;
	background-color: white;
	margin: 0;
	padding: 0;
	text-align: center;
	background: url(../manage/images/left.jpg) right 0 repeat-y;
}

table {
	border-collapse: collapse;
	height: 100%;
}

div,p,table,th,td {
	list-style: none;
	margin: 0;
	padding: 0;
	color: #333;
	font-size: 12px;
	font-family: dotum, Verdana, Arial, Helvetica, AppleGothic, sans-serif;
}

#testIframe {
	margin-left: 10px;
}

.left {
	width: 270px;
	text-align: left;
	vertical-align: top;
	overflow-x: hidden;
}

.tab_div1 {
	height: 60px;
	font-size: 14px;
	background: url(../manage/images/tab01.jpg) 0 0 no-repeat;
	background-size:100%;
	overflow：hidden;
}

.tab_div2 {
	height: 60px;
	font-size: 14px;
	background-size:100%;
	background: url(../manage/images/tab02.jpg) 0 0 no-repeat;
	overflow：hidden;
}

.tab1 {
	float: left;
	margin: 20px 25px 0 25px;
	display: block;
	width: 95px;
	height: 40px;
	cursor: pointer;
}

.tab2 {
	float: left;
	margin: 20px 25px 0 0;
	display: block;
	width: 95px;
	height: 40px;
	cursor: pointer;
}
</style>
	</head>

	<SCRIPT type="text/javascript">
	//后台管理模块的树加载配置
	var zTree;
	var demoIframe;
	var setting = {
		view : {
			dblClickExpand : false,
			showLine : true,
			selectedMulti : false,
			expandSpeed : ($.browser.msie && parseInt($.browser.version) <= 6) ? ""
					: "fast"
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId",
				rootPId : ""
			}
		},
		callback : {
			beforeClick : function(treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				if (treeNode.isParent) {
					zTree.expandNode(treeNode);
					if (treeNode.pId != 0) {
						demoIframe.src=root + treeNode.file;
						statusProcess();
					}
					return false;
				} else {
					if (treeNode.file != "") {
						demoIframe.src=root + treeNode.file;
						statusProcess();
					}
					return true;
				}
			}
		}
	};

	//应用内容管理模块树加载	
	var setting1 = {
		view : {
			dblClickExpand : false,
			showLine : true,
			selectedMulti : false,
			expandSpeed : ($.browser.msie && parseInt($.browser.version) <= 6) ? ""
					: "fast"
		},
		data : {
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "pId",
				rootPId : ""
			}
		},
		callback : {
			beforeClick : function(treeId, treeNode) {
				var zTree = $.fn.zTree.getZTreeObj("tree");
				if (treeNode.isParent) {
					zTree.expandNode(treeNode);
					demoIframe.src="${pageContext.request.contextPath}/dataBinding/getAppCatelogById.action?id="+ treeNode.id;
					statusProcess();
					return true;
				} else {
					//叶子节点不处理
					demoIframe.src="${pageContext.request.contextPath}/dataBinding/getAppContent.action?intCateId="+ treeNode.id;
					statusProcess();
					return true;
				}
			}
		}
	};
	
	function statusProcess() {
		if (demoIframe.attachEvent){
				demoIframe.attachEvent("onload", function(){
					self.parent.parent.window.frames.topFrame.hideLoadStatus();
			});
		} else {
			demoIframe.onload = function(){
				self.parent.parent.window.frames.topFrame.hideLoadStatus();
			};
		}
		self.parent.parent.window.frames.topFrame.showLoadStatus();
	}
	
	var zNodes;
	$(document).ready(function() {
		demoIframe = self.parent.document.getElementById("contentFrame");
		createTree("${pageContext.request.contextPath}/dataBinding/getBackStageTree.action",setting);
		//后台功能模块    
		$("#backStage").bind("click", function() {
			//更改css樣式
			$("#div_tab").attr("class", "tab_div1");
			createTree("${pageContext.request.contextPath}/dataBinding/getBackStageTree.action",setting);
		});
		$("#appContent").bind("click", function() {
			//更改css樣式
			$("#div_tab").attr("class", "tab_div2");
			//应用内容管理
			createTree("${pageContext.request.contextPath}/dataBinding/getAppCatlogTree.action",setting1);
		});
	});
	
	function createTree(url,set) {
        $.ajax({
            url: url,
            type: 'POST',
            async:false,
            dataType: "json",
            success: function(data) {
                zNodes = data;
                $.fn.zTree.init($("#tree"), set, zNodes);
            },
            error: function(msg) {
                alert("加载导航树失败");
            }
        });
    }
</SCRIPT>
	</HEAD>
	<BODY>
		<div class="left">
			<div class="tab_div1" id="div_tab">
				<a id="backStage" class="tab1" href="#"></a>
				<a id="appContent" class="tab2" href="#"></a>
			</div>
			<ul id="tree" class="ztree"></ul>
		</div>
	</BODY>
</HTML>
